<template>
  <div class="FourthDay">
    <el-row>
      <el-col>
        <!-- 标题 -->
        <el-row>先点击 查询全部数据，拿到数据库中的数据列表id</el-row>
        <!-- 内容 -->
        <el-row style="margin-top:12px;">
          <el-col :span="15">
            <!-- id -->
            <el-row :gutter="20">
              <el-col :span="5">对象ID:</el-col>
              <el-col :span="19">
                <el-input placeholder="数据id（可选）" v-model="TestObjectId"></el-input>
              </el-col>
            </el-row>
            <!-- key -->
            <el-row :gutter="20" style="margin-top:12px;">
              <el-col :span="5">key:</el-col>
              <el-col :span="19">
                <el-input placeholder="请输入key" v-model="inputKey"></el-input>
              </el-col>
            </el-row>
            <!-- value -->
            <el-row :gutter="20" style="margin-top:12px;">
              <el-col :span="5">value:</el-col>
              <el-col :span="19">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 8}"
                  placeholder="请输入value"
                  v-model="inputvalue"
                  clearable
                ></el-input>
              </el-col>
            </el-row>
          </el-col>
          <!-- ID list -->
          <el-col :span="8" style="margin-left:8px;">
            <el-card>
              <el-col>数据ID列表：</el-col>
              <el-row v-for="(item,index) in IDList" :key="index">
                <el-col>{{item}}</el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <!-- 功能 -->
        <el-row style="margin-top:12px;">
          <el-col :span="4">
            <el-button @click.prevent="addItem" type="primary">添加数据</el-button>
          </el-col>

          <el-col :span="4">
            <el-button @click.prevent="deleteItem" type="success">删除数据</el-button>
          </el-col>

          <el-col :span="4">
            <el-button @click.prevent="updateItem" type="info">更新数据</el-button>
          </el-col>

          <el-col :span="4">
            <el-button @click.prevent="queryCloundData" type="warning">查数据</el-button>
          </el-col>

          <el-col :span="4">
            <el-button @click.prevent="queryIDList" type="success">查全部数据</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AV from "leancloud-storage";

export default {
  name: "FourthDay",
  props: {
    item: {
      title: String,
      closed: Boolean
    }
  },
  data() {
    return {
      inputKey: "",
      inputvalue: "",
      TestObjectId: "",
      IDList: []
    };
  },
  created() {
    
  },
  methods: {
    // 是否有值
    getcurrentValue() {
      // || this.TestObjectId.length < 1
      return this.inputKey.length < 1 || this.inputvalue.length < 1;
    },
    // 测试增加数据
    addItem: function() {
      if (this.getcurrentValue()) {
        return alert("ID:key:value 不能为空");
      }
      var that = this;
      var TestObject = AV.Object.extend("TestObject");
      var testObject = new TestObject();
      testObject.set(that.inputKey, that.inputvalue);
      testObject.save().then(
        function(object) {
          console.log("插入数据成功");
          console.log(object);
          // var id = object.get("id");
          that.TestObjectId = object.id;
          console.log("我 id " + that.TestObjectId);
        },
        function(error) {
          // 失败
          console.log(error);
          console.log("插入 失败");
        }
      );
      // .save({inputKey
      //   words: "Hello World!s"
      // })

      // 该语句应该只声明一次
      // var TestObject = AV.Object.extend("DataTypeTest");

      // var number = 2014;
      // var string = "famous film name is " + number;
      // var date = new Date();
      // var array = [string, number];
      // var object = { number: number, string: string };

      // var testObject = new TestObject();
      // testObject.set("testNumber", number);
      // testObject.set("testString", string);
      // testObject.set("testDate", date);
      // testObject.set("testArray", array);
      // testObject.set("testObject", object);
      // testObject.set("testNull", null);
      // testObject.save().then(
      //   function(testObject) {
      //     // 成功
      //     console.log(testObject);
      //     console.log("插入 成功");
      //   },
      //   function(error) {
      //     // 失败
      //     console.log(error);
      //     console.log("插入 失败");
      //   }
      // );
    },
    // 删除数据
    deleteItem: function() {
      if (this.getcurrentValue()) {
        return alert("ID:key:value 不能为空");
      }
      var todo = AV.Object.createWithoutData("TestObject", this.TestObjectId);
      todo.destroy().then(
        function(success) {
          console.log(success);
          console.log("删除 成功");
          this.TestObjectId = "";
        },
        function(error) {
          console.log(error);
          console.log("删除 失败");
        }
      );
    },
    //更新数据
    updateItem: function() {
      if (this.getcurrentValue()) {
        return alert("ID:key:value 不能为空");
      }
      // 第一个参数是 className，第二个参数是 objectId
      var todo = AV.Object.createWithoutData("TestObject", this.TestObjectId);
      // 修改属性
      todo.set(this.inputKey, this.inputvalue);
      // 保存到云端
      todo.save().then(
        function(success) {
          console.log(success);
          console.log("更新 成功");
        },
        function(error) {
          console.log(error);
          console.log("更新 失败");
        }
      );
    },
    // 查询保存的数据
    queryCloundData: function() {
      if (this.TestObjectId.length < 1) {
        return alert("数据id 不能为空");
      }
      var query = new AV.Query("TestObject");
      var self = this;
      query.get(self.TestObjectId).then(
        function(todo) {
          // 成功获得实例
          console.log("查询 成功");
          console.log(todo);
          for (var p in todo.attributes) {
            self.inputKey = p;
          }
          self.inputvalue = todo.attributes.json;
          // JSON.stringify(todo)
        },
        function(error) {
          // 异常处理
          console.log("查询 失败");
          console.log(error);
        }
      );
    },
    // 查询 表TestObject 全部数据
    queryIDList() {
      this.IDList = [];
      var query = new AV.Query("TestObject");
      var self = this;
      // query.equalTo("priority", 0);
      // query.lessThan("priority", 2);
      // 如果这样写，第二个条件将覆盖第一个条件，查询只会返回 priority = 1 的结果
      query.find().then(
        function(results) {
          console.log("查询 success");
          console.log(results);
          for (var i = 0; i < results.length; i++) {
            self.IDList.push(results[i].id);
          }
        },
        function(error) {
          console.log("查询失败");
          console.log(error);
        }
      );
    }
  },

  filters: {},
  // 输入框的  监听方法
  watch: {}
};
</script>

<style lang="scss" scoped>
</style>

